<template>
  <div class="">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="(art, i) in list" :key="i" :title="art.title" />
    </van-list>
  </div>
</template>

<script>
import { search } from "@/api/search.js";
export default {
  name: "search-result",
  props: {
    searchKey: {
      required: true,
      type: String,
    },
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1,
      pageSize: 10,
    };
  },
  methods: {
    async onLoad() {
      // 发送请求到服务器，获取搜索文章结果数据
      const { data: resBody } = await search(this.searchKey, this.page, 10);
      console.log("搜索的文章数据", resBody.data.results);
      this.list.push(...resBody.data.results);
      // 关闭加载状态
      this.loading = false;
      // this.finished = true;
      // 如果返回数组的长度小于页容量，则不需要再触底
      if (resBody.data.results.length < this.pageSize) {
        this.finished = true;
      }
    },
  },
  created() {},
  computed: {},
  watch: {},
  components: {},
};
</script>

<style lang="scss" scoped>
</style>